<!-- 新增立项 -->
<template>
  <div style="padding: 15px 30px">
    <div v-if="model">
      <el-form :model="model" class="padding-top-15" label-width="130px" size="small"  :disabled="isDisabled">
        <el-row>
          <el-col :span="8">
            <el-form-item label="项目名称">
              <el-input v-model="model.projectCloudDto.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请部门">
              <el-input v-model="model.chargeItemCloudDto.applySection"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申请人">
              <el-input v-model="model.chargeItemCloudDto.applyUser"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div style="display: flex; justify-content: space-between" class="padding-top-15 padding-bottom-15">
          <div class="font-size-16 font-weight-700">项目信息</div>
          <div></div>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事项类型">
              <el-select v-model="model.chargeItemCloudDto.chargeItemType">
                <el-option v-for="item in mattersType" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事项名称">
              <el-input v-model="model.chargeItemCloudDto.chargeItemName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总成本">
              <el-input type="number" v-model="model.billConfigCloudDto.totalCost" :step="10"></el-input>
            </el-form-item>
          </el-col>
          <template v-if="model.chargeItemCloudDto.chargeItemType == '1' || model.chargeItemCloudDto.chargeItemType == '2'">
            <el-col :span="12">
              <el-form-item label="付款方式">
                <el-select v-model="model.billConfigCloudDto.paymentMethod">
                  <el-option v-for="item in paymentMethod" :key="item.key" :label="item.value" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="首次付款时间">
                <el-date-picker v-model="model.billConfigCloudDto.firstPaymentDate" type="date"> </el-date-picker>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="model.chargeItemCloudDto.chargeItemType == '3'">
            <el-col :span="12" v-for="item in model.forecastItemListCloudDto" :key="item.month">
              <el-form-item :label="item.month + '月 预估金额'">
                <el-input type="number" v-model="item.paymentAmount" :min="0" :step="10"></el-input>
              </el-form-item>
            </el-col>
          </template>

          <template v-if="model.chargeItemCloudDto.chargeItemType == '4' || model.chargeItemCloudDto.chargeItemType == '9'">
            <el-col :span="12">
              <el-form-item label="事项内容">
                <el-input v-model="model.chargeItemCloudDto.chargeItemDesc"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联设备设施">
                <el-select v-model="model.billConfigCloudDto.linkedDevice">
                  <el-option v-for="item in linkedDevice" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <div v-if="model.billConfigCloudDto.linkedDevice == 0">
              <el-col :span="12">
                <el-form-item label="选择子系统">
                  <el-select v-model="model.billConfigCloudDto.system" @change="systemChange">
                    <el-option v-for="item in system" :key="item.primaryKey" :label="item.systemName" :value="item.primaryKey" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选择设备">
                  <el-select v-model="model.billConfigCloudDto.device">
                    <el-option v-for="item in device" :key="item.primaryKey" :label="item.deviceName" :value="item.primaryKey" />
                  </el-select>
                </el-form-item>
              </el-col>
            </div>
            <el-col :span="12" v-else>
              <el-form-item label="选择设施">
                <el-select v-model="model.billConfigCloudDto.facility">
                  <el-option v-for="item in facility" :key="item.primaryKey" :label="item.stationName" :value="item.primaryKey" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择功能分区">
                <el-select v-model="model.billConfigCloudDto.spacePartition">
                  <el-option v-for="item in spacePartition" :key="item.primaryKey" :label="item.partitionName" :value="item.primaryKey" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="选择楼层">
                <el-select v-model="model.billConfigCloudDto.floor">
                  <el-option v-for="item in floor" :key="item.primaryKey" :label="item.floorName" :value="item.primaryKey" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否资本性支出" label-width="140px">
                <el-select v-model="model.billConfigCloudDto.ifCapitalPayment">
                  <el-option v-for="item in ifCapitalPayment" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="关联资本性支出类型" label-width="165px">
                <el-select v-model="model.billConfigCloudDto.capitalPaymentType">
                  <el-option v-for="item in capitalPaymentType" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <div v-if="model.paymentItemListCloudDto.length > 0">
              <el-col :span="24">
                <div style="display: flex; justify-content: space-between" class="padding-top-15 padding-bottom-15">
                  <div class="font-size-16 font-weight-700">付款计划</div>
                </div>
              </el-col>
              <div v-for="(item, index) in model.paymentItemListCloudDto" :key="index">
                <el-col :span="12">
                  <el-form-item label="付款时间">
                    <el-date-picker v-model="item.paymentDate" type="date"> </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="付款金额">
                    <el-input type="number" v-model="item.paymentAmount" :step="10"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </div>
          </template>
          <template v-if="model.chargeItemCloudDto.chargeItemType == '1' || model.chargeItemCloudDto.chargeItemType == '2'">
            <el-col :span="12">
              <el-form-item label="开始时间">
                <el-date-picker v-model="model.billConfigCloudDto.rentStartDate" type="date"> </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间">
                <el-date-picker v-model="model.billConfigCloudDto.rentEndDate" type="date"> </el-date-picker>
              </el-form-item>
            </el-col>
          </template>
          <div>
            <el-col :span="24">
              <el-form-item label="附件">
                <div v-if="model.businessAttachmentMapListCloudDto.length>0">
                  <span style="color: #409eff; cursor: pointer" v-for="(file, i) in model.businessAttachmentMapListCloudDto" :key="i" @click="DownFile(file)">{{ file.fileTitle }} </span>
                </div>
                <div v-else style="color: #C0C4CC;">暂无附件</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="说明">
                <el-input autosize v-model="model.billConfigCloudDto.configDesc" clearable></el-input>
              </el-form-item>
            </el-col>
          </div>
        </el-row>
      </el-form>
    </div>

    <div style="display: flex; justify-content: space-between" class="padding-top-15">
      <div class="font-size-16 font-weight-700">历史支出</div>
      <div></div>
    </div>
    <div class="padding-left-10 padding-top-15">
      <el-form ref="form" label-width="120px">
        <el-table class="group-operation-table" :data="tableData" style="width: 60%" border>
          <el-table-column prop="actualPaymentDate" label="时间" align="center"> </el-table-column>
          <el-table-column prop="paymentAmount" label="支出金额" align="center"> </el-table-column>
          <el-table-column prop="fundsDesc" label="事项内容" align="center"> </el-table-column>
        </el-table>
      </el-form>
    </div>
    <approve-info></approve-info>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import approveInfo from './approveInfo.vue';
import Api from '../../api/assetsMap';
export default {
  data() {
    return {
      model: {},
      tableData: [],
      isDisabled: true,
      labelWidth: '130px',
      mattersType: [
        {
          name: '保安人员费用',
          id: '1',
        },
        {
          name: '保洁人员费用',
          id: '2',
        },
        {
          name: '日常易耗品',
          id: '3',
        },
        {
          name: '保养',
          id: '4',
        },
        {
          name: '新增',
          id: '9',
        },
      ],
      paymentMethod: [], //付款方式
      linkedDevice: [
        {
          name: '设备',
          id: '0',
        },
        {
          name: '设施',
          id: '1',
        },
      ], //关联设备设施
      system: [], //子系统
      device: [], //设备
      facility: [], //设施
      spacePartition: [], //功能分区
      floor: [], //楼层
      ifCapitalPayment: [
        {
          id: 1,
          name: '是',
        },
        {
          id: 0,
          name: '否',
        },
      ], //是否资本性支出
      capitalPaymentType: [
        {
          name: '项目更新改造、店面提升',
          id: '0',
        },
        {
          name: '设备更新、大中修',
          id: '1',
        },
        {
          name: '屋面防水工程',
          id: '2',
        },
        {
          name: '大额设备设施损坏',
          id: '3',
        },
      ], //关联资本性支出类型
    };
  },
  filters: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //接收参数
  props: {},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getPaymentMethod();
    this.getDetail();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    async getDetail() {
      const res = await Api.projectDetails({
        primaryKey: this.$route.query.chargeItemKey,
      });
      if (res && res.success) {
        this.model = res;
        this.getDictionary(this.model.projectCloudDto.primaryKey, this.model.billConfigCloudDto.system);
        this.getHistorySpending(this.model.chargeItemCloudDto.bizId, this.model.chargeItemCloudDto.changeItemType);
      }
    },
    async getHistorySpending(bizId, changeItemType) {
      const res = await Api.queryPaymentRecordList({
        changeItemType,
        bizId,
      });
      if (res && res.success) {
        res.rows.forEach(item => {
          if (item.actualPaymentDate) {
            item.actualPaymentDate = dayjs(item.actualPaymentDate).format('YYYY-MM-DD');
          }
        });
        this.tableData = res.rows;
      }
    },
    async getPaymentMethod() {
      const res = await Api.constantPaymentMethod();
      this.paymentMethod = res.paymentMethod;
    },
    DownFile(file) {
      window.open(file.fileUrl);
    },
    async getDictionary(projectKey, systemKey) {
      const res = await Api.dictionary({
        projectKey,
        systemKey,
      });
      if (res && res.success) {
        //楼层
        this.floor = res.businessFloor;
        //设施
        if (res.baseStation && res.baseStation.success) {
          this.facility = res.baseStation.rows;
        }
        //分区
        if (res.spacePartition && res.spacePartition.success) {
          this.spacePartition = res.spacePartition.rows;
        }
        //子系统
        if (res.systemInfo && res.systemInfo.success) {
          this.system = res.systemInfo.rows;
        }
        //设备deviceInfo
        if (res.deviceInfo && res.deviceInfo.success) {
          this.device = res.deviceInfo.rows;
        }
      }
    },
  },
  components: { approveInfo },
};
</script>
<style scoped lang="scss">
.group-operation-table {
  color: #666;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid #ccc;
}
/* @import url(); 引入css类 */
.flex-box {
  height: 50px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  align-items: center;

  justify-content: space-between;
  .large-title {
    font-size: 18px;
  }
}
</style>
